<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords"
		content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
	<meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<!-- 引入首页样式 -->
	<link rel="stylesheet" href="./css/home.css" />
	<!-- 引入排行榜样式 -->
	<link rel="stylesheet" href="./css/hometwo.css" />
	<!-- 引入搜索样式 -->
	<link rel="stylesheet" href="./css/search.css" />
	<link rel="stylesheet" href="./font_4705900_67g5x6mv1a7/iconfont.css" />
	<title>网易云音乐YW</title>
</head>

<body>
	<!-- 这是头部 -->
	<div class="header-box">
		<header class="w">
			<ul class="top-nav">
				<li class="music-btn flag">推荐音乐</li>
				<li class="rankings-btn">排行榜</li>
				<li class="search-btn">搜索</li>
			</ul>
		</header>
	</div>
	<!-- 这是第一个页面推荐音乐页面 -->
	<div class="one-page ">
		<!-- 中间的推荐榜单 -->
		<div class="center-box">
			<section class="w">
				<p class="song-list">推荐歌单</p>
				<!-- 低下的歌单 -->
				<div class="playlist-box">
					<!-- 放歌单图片文字的盒子 -->
					<!-- <div class="playlist">
						<p class="top-right-text">1111万</p>
						<img src="./img/推荐歌单的默认图片.jpg" alt="" />
						<p class="playlist-bottom-text">图片低下详情介绍</p>
					</div> -->
				</div>
			</section>
		</div>
		<!-- 最新音乐 -->
		<div class="Latest-music-box">
			<!-- 最新音乐盒子-->
			<section class="w">
				<p class="latest-list">最新音乐</p>
				<!-- 最新音乐的盒子 -->
				<div class="latest-list-box">
					<!-- 最新音乐左边 -->
					<!-- <div class="new-music">
						<div class="latest-list-left">
							<p class="music-title">歌曲名</p>
							<div class="music-text">
								<p class="Tone-quality"></p>
								歌手和专辑
							</div>
						</div>
						<div class="latest-list-right">
							<img src="./img/index_icon_2x.png" alt="" />
							<div class="latest-right-img"></div>
						</div>
					</div> -->

				</div>
			</section>
		</div>

	</div>
	<!-- 这是第二个页面排行榜页面  -->
	<div class="two-page">
		<!-- 排行榜 -->
		<div class="Leaderboard w">
			<!-- 飙升榜 -->
			<!-- <div class="Leaderboard-box">
				<div class="Leaderboard-left">
					飙升榜
				</div>
				<div class="Leaderboard-right">
					<p>1.歌曲</p>
					<p>2.歌曲</p>
					<p>3.歌曲</p>
				</div>
			</div> -->
		</div>
	</div>
	<!-- 这是第三个页面搜索 -->
	<div class="three-page">
		<!-- 搜索 -->
		<div class="search">
			<!-- 搜索的上面 -->
			<div class="search-top">
				<!-- 搜索框的盒子 -->
				<div class="search-box">
					<i class="iconfont" id="search-icon">&#xe6a2;</i>
					<input class="seach" type="search" placeholder="搜索歌曲,歌手,专辑" />
				</div>
			</div>
		</div>
		<!-- 热门搜索 -->
		<div class="Hot-search-box w">
			<div class="Hot-search">
				热门搜索
			</div>
			<div class="Hot-search-list">
				<div>11111</div>
				<div>11111</div>
			</div>
		</div>
		<!-- 历史搜索 -->
		<div class="historical-search w">
			<div class="historical-search-box">
				<!-- <div class="historical-box" style="display: none;">
					<div class="clock"><i class="iconfont">&#xe74f;</i></div>
					<div>搜索内容</div>
					<div class="X" id="0">×</div>
				</div> -->
			</div>
		</div>
	</div>
	<!-- 吸底 -->
	<footer>
		<div class="bottom w">
			<div class="bottom-box">
				<div class="home-btn btn"><i class="iconfont">&#xe6a7;</i>
					<p>首页</p>
				</div>
				<div class="search-icon-btn"><i class="iconfont">&#xe6a2;</i>
					<p>搜索</p>
				</div>
				<div><i class="iconfont">&#xe6a3;</i>
					<p>我的</p>
				</div>
			</div>
		</div>
	</footer>

</body>

</html>
<!-- 引入jquery -->
<script src="./js/jquery-1.11.1.min.js"></script>
<!-- 推荐歌单 -->
<script src="./js/获取推荐歌单/getsonglist.js"></script>
<!-- 推荐新音乐 -->
<script src="./js/获取推荐新音乐/Get-newmusic.js"></script>
<!-- 获取榜单 -->
<script src="./js/获取榜单/Get-rankings.js"></script>
<!-- 首页Tab切换 -->
<script src="./js/首页TAB切换/homeTab.js"></script>
<!-- 搜索历史 -->
<script src="./js/首页搜索历史/search-history.js"></script>